<template>
<form class="login">
       <label>

           <input class="q" type="text" v-model="username" placeholder="输入手机号/邮箱"/>
           <div class="w"></div>
        </label> 
        <label>
            
            <input class="q" type="password" v-model="password"  placeholder="输入密码/验证码"/>
            <div class="w"></div>
        </label>
        <label>
            <button @click="login" class="e">登录</button>
        </label>


</form>
  
</template>
<script>
import $ from 'jquery';
export default {
    data:function() {
        return{
           username:'',
           password:''
        }
    },
    methods:{
        login:function(){
            var url = 'http://localhost:3000/users/login?username='+ this.username +'&pwd='+ this.password;
            $.get(url,function(res){
                console.log(res);
                console.log(res.code)
                if(res && res.code == 1){
                    alert("成功1");
                }else{
                    alert("失败1");
                }
            })
        }
    }
  
}
</script>
<style>
.login{
   
  
   position: absolute;
   top:50px;
   left:0;
   right: 0;
   bottom: 0;
   padding:0 31px 0 31px;
   background-color: #f6f6f6;

}
label{
    margin: 30px 0 0;
    display: block;
    position: relative;
    box-sizing: border-box;
    
}
.q{
    border: none;
    background-color: #f6f6f6;
    border-radius: 0px;
    box-shadow: none;
    outline: none;
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    box-sizing: border-box;
}
.w{
    position: absolute;
    top: 20px;
    height: 12px;
    width: 100%;
    border: solid #c4c4c4;
    border-width: 0 1px 1px 1px;
    box-sizing: border-box;
}
.e{
    width: 163px;
    background-color: #fe8233;
    color: #fff;
    border: none;
    border-radius: 36px;
    padding: 8px 12px;
    font-size: 15px;
    outline: none;
    display: block;
    margin:45px auto 0;
}

</style>
